<template>
  <view class="tenantSelect">
    <view class="bg">
      <view
        class="item"
        v-for="(value, index) in list"
        :key="index"
        :class="{ itemLast: index === list.length - 1 }"
      >
        <image class="item-icon" mode="aspectFill" :src="value.icon"></image>
        <view class="item-name">{{ value.name }}</view>
        <image
          class="item-arrow"
          src="@/static/images/common/arrow_default.png"
        ></image>

        <view v-if="value.isLast" class="lastIdentify">上次登录</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps({
  list: {
    type: Array,
    default: [],
  },
});
</script>

<style lang="scss" scoped>
.tenantSelect {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .bg {
    margin-top: auto;
    width: calc(100% - 96rpx);
    margin-bottom: 358rpx;
  }

  .item {
    position: relative;
    height: 176rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #ffffff;
    border-radius: 17rpx;
    margin-top: 24rpx;
    &-icon {
      margin-left: 48rpx;
      width: 96rpx;
      height: 96rpx;
    }
    &-name {
      margin-left: 16rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #111111;
      line-height: 32rpx;
    }
    &-arrow {
      margin-left: auto;
      margin-right: 48rpx;
      width: 24rpx;
      height: 24rpx;
    }
    .lastIdentify {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 148rpx;
      height: 48rpx;
      background: linear-gradient(89deg, #3d8eff 0%, #7835ff 100%);
      border-radius: 0rpx 17rpx 0rpx 17rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 48rpx;
      text-align: center;
    }
  }
}
</style>
